<template>
  <div class="bg_view">
    <div class="box_view">
      <div
        class="cam_item"
        v-for="item in depts"
        @click="goDetail(item.id)"
      >
        <img :src="item.iconUrl" alt=""/>
        <div>{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import {getFeaturedItemList, getFeaturedItemDetail} from "@/api/api";

export default {
  name: "illnessCheck",
  data() {
    return {
      depts: [],
      type: this.$route.query.type
    };
  },
  created() {
    this.getDeptInfo();
  },
  methods: {
    //跳转预约挂号or在线问诊
    goDetail(value) {
      this.$router.push({
        path: "/reserv_service?id=" + value
      });
    },
    getDeptInfo() {
      getFeaturedItemList().then(res => {
        if (res.code == 200) {
          this.depts = res.data;
        }
      });

    }
  }
};
</script>
<style scoped>
.bg_view {
  height: 100%;
  min-height: 100vh;
  background-color: #f4f8fc;
  overflow: auto;
  padding-top: 20px;
}

.box_view {
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.cam_item {
  width: 31%;
  height: 76.96px;
  background-color: #fff;
  margin-bottom: 10.08px;
  padding-top: .9rem;
  font-weight: 500;
  font-size: .9rem;
  color: #3f4551;
  text-align: center;
  box-shadow: 0px 0 0px 0.96px rgba(130, 167, 210, 0.27);
  border-radius: 4.96px 4.96px 4.96px 4.96px;
}

.cam_item img {
  width: 1.45rem;
  height: 1.45rem;
  margin-bottom: .68rem;
}
</style>
